<!-- @format -->

<template>
  <div>
    <p ref="ppp">{{ count }}</p>
    <button @click="fn">点我试试</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 0
      }
    },
    methods: {
      fn() {
        // 1. count自增
        this.count++

        // 注意：
        // (1) Vue中数据变了，DOM更新是异步的、批量的
        // (2) 当count自增了，DOM的更新需要排队等待，不会立即更新DOM

        // 2. 获取p的内容
        // console.log(this.$refs.ppp.innerText)

        // 当数据变了，想拿到最新的DOM，有2种方式：
        // (1)  updated()钩子函数
        // (2)  this.$nextTick(回调函数)，在回调中，DOM已更新完毕
        this.$nextTick(() => {
          console.log(this.$refs.ppp.innerText)
        })
      }
    }
  }
</script>

<style></style>
>
